<!--
 * @Author: your name
 * @Date: 2021-01-07 14:04:59
 * @LastEditTime: 2022-06-09 17:36:53
 * @LastEditors: liushengyan
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\views\AppMain.vue
 *<el-scrollbar></el-scrollbar>
-->
<template>
  <el-container id="appmain_div">
    <el-aside width="auto">
      <side-bar></side-bar>
    </el-aside>
    <el-container>
      <el-header style="margin-top: 40px">
        <el-icon class="opened_icon" @click="store.dispatch('app/closeMenu')">
          <i-ep-Fold v-show="!store.getters.opened" />
          <i-ep-Expand v-show="store.getters.opened" />
        </el-icon>
        <el-icon class="exit_icon" @click="exit()">
          <i-ep-SwitchButton />
        </el-icon>
      </el-header>
      <el-main>
        <transition name="el-zoom-in-top" mode="out-in">
          <router-view />
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
const store = useStore();
const router = useRouter();
const exit = () => {
  store.dispatch("app/exit");
  router.push({ path: "/login" });
};
</script>

<style lang="scss" scoped>
#appmain_div {
  width: 100%;
  height: 100%;
}
.opened_icon {
  font-size: 30px;
  color: rgb(255, 255, 255, 0.7);
  &:hover {
    color: white;
  }
}
.exit_icon {
  font-size: 30px;
  color: rgba(255, 0, 0, 0.5);
  float: right;
  &:hover {
    color: rgba(255, 0, 0, 1);
  }
}
</style>
